<style>
/* 页脚基础样式 */
footer {
  background-color: var(--footer-bg, #f5f5f5);
  color: var(--footer-text, #555555);
  padding: 3rem 0 1.5rem;
  position: relative;
  z-index: 10;
}

.dark footer {
  background-color: #1a1a1a;
  color: #aaaaaa;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-about {
  grid-column: span 1;
}

.footer-col h3 {
  color: var(--footer-title, #333333);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  position: relative;
}

.dark .footer-col h3 {
  color: #e0e0e0;
}

.footer-col p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-tagline {
  font-style: italic;
  color: var(--primary, #f08a5d);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.dark .footer-tagline {
  color: #d07a4d;
}

.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(240, 138, 93, 0.1);
  border-radius: 50%;
  color: var(--primary, #f08a5d);
  text-decoration: none;
  transition: all 0.3s;
  font-size: 1.2rem;
}

.dark .footer-social-icon {
  background-color: rgba(208, 122, 77, 0.15);
  color: #d07a4d;
}

.footer-social-icon:hover {
  background-color: var(--primary, #f08a5d);
  color: white;
  transform: translateY(-3px);
}

.dark .footer-social-icon:hover {
  background-color: #d07a4d;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  color: var(--footer-text, #555555);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s;
  display: inline-block;
}

.dark .footer-links a {
  color: #aaaaaa;
}

.footer-links a:hover {
  color: var(--primary, #f08a5d);
  transform: translateX(5px);
}

.dark .footer-links a:hover {
  color: #d07a4d;
}

.copyright {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.85rem;
}

.dark .copyright {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  
  .footer-col {
    text-align: center;
  }
  
  .footer-col h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    position: relative;
    padding-bottom: 0.5rem;
  }
  
  .footer-col h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background-color: var(--primary);
  }
  
  .dark .footer-col h3::after {
    background-color: #d07a4d;
  }
  
  .footer-col p {
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
  }
  
  .footer-tagline {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
  }
  
  .footer-social {
    justify-content: center;
    margin-top: 1rem;
  }
  
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
  }
  
  .footer-links li {
    margin-bottom: 0.5rem;
  }
  
  .footer-links a {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
  }
  
  .copyright {
    padding-top: 1rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  footer {
    padding: 2rem 0 5rem;
  }
  
  .footer-col h3 {
    font-size: 1rem;
  }
  
  .footer-col p,
  .footer-links a {
    font-size: 0.8rem;
  }
  
  .footer-social-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

/* 移动端底部导航样式 */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 0.5rem 0;
  justify-content: space-around;
  overflow-x: auto;
  white-space: nowrap;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--gray);
  font-size: 0.65rem;
  padding: 0.3rem 0.5rem;
  min-width: 60px;
  transition: all 0.3s ease;
}

.mobile-nav-icon {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  transition: all 0.3s ease;
}

.mobile-nav-item.active {
  color: var(--primary);
}

.mobile-nav-item:hover {
  color: var(--primary);
}

/* 暗黑模式适配 */
.dark .mobile-nav {
  background-color: #1a1a1a;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dark .mobile-nav-item {
  color: #aaaaaa;
}

.dark .mobile-nav-item.active,
.dark .mobile-nav-item:hover {
  color: #d07a4d;
}

/* 在小屏幕上进一步优化导航图标和文字大小 */
@media (max-width: 375px) {
  .mobile-nav-item {
    font-size: 0.6rem;
    min-width: 50px;
  }

  .mobile-nav-icon {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .mobile-nav {
    display: flex !important;
  }
  
  /* 为底部导航添加额外的底部内边距，防止内容被遮挡 */
  body {
    padding-bottom: 60px !important;
  }
}

/* 回到顶部按钮样式 - 全新设计 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 9999;
  overflow: hidden;
  background: linear-gradient(135deg, #f08a5d, #f9b384);
  box-shadow: 0 6px 20px rgba(240, 138, 93, 0.3);
  transform: translateY(20px);
}

.back-to-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  z-index: 1;
}

.back-to-top-icon {
  position: relative;
  z-index: 2;
  font-size: 1.5rem;
  color: white;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 30px;
  height: 30px;
  background-image: url('{$setting.web_view}/miao.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 猫爪图标 */
.back-to-top-icon::before {
  content: "";
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 25px rgba(240, 138, 93, 0.4);
}

.back-to-top:hover .back-to-top-icon {
  transform: translateY(-5px);
}

/* 点击效果 */
.back-to-top:active {
  transform: scale(0.95);
  box-shadow: 0 3px 10px rgba(240, 138, 93, 0.3);
}

/* 添加波纹效果 */
.back-to-top .ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.8s linear;
  pointer-events: none;
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* 暗黑模式适配 */
.dark .back-to-top {
  background: linear-gradient(135deg, #d07a4d, #e0a080);
  box-shadow: 0 6px 20px rgba(208, 122, 77, 0.3);
}

.dark .back-to-top:hover {
  box-shadow: 0 10px 25px rgba(208, 122, 77, 0.4);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 75px; /* 避免与移动端底部导航重叠 */
    right: 20px;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .back-to-top {
    bottom: 80px;
    right: 15px;
    width: 45px;
    height: 45px;
  }
  
  .back-to-top-icon {
    font-size: 1.3rem;
  }
}

/* 添加进度指示器 */
.scroll-progress-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  z-index: 0;
}

.scroll-progress-indicator::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.scroll-progress-indicator::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  border: 2px solid white;
  clip-path: var(--scroll-progress, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%));
  transition: clip-path 0.3s ease;
}

/* 确保回到顶部按钮在需要时可见 */
.back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Add improved dark mode styles for the footer */

</style>
<footer>
<div class="container">
    <div class="footer-grid">
        <div class="footer-col footer-about">
            <h3>关于我们</h3>
            <p>橘喵云是一家专业的IDC服务提供商，致力于为企业提供高品质的数据中心服务，包括服务器托管、云服务器、网络安全等全方位解决方案。</p>
            <div class="footer-tagline">您的数字家园守护者</div>
            <div class="footer-social">
                <a href="#" class="footer-social-icon">📱</a>
                <a href="#" class="footer-social-icon">💬</a>
                <a href="#" class="footer-social-icon">📧</a>
            </div>
        </div>
        
        <div class="footer-col">
            <h3>产品服务</h3>
            <ul class="footer-links">
                <li><a href="#">服务器托管</a></li>
                <li><a href="#">云服务器</a></li>
                <li><a href="#">网络安全</a></li>
                <li><a href="#">域名注册</a></li>
                <li><a href="https://cloud.ogmiao.com/solutions.html">解决方案</a></li>
            </ul>
        </div>
        
        <div class="footer-col">
            <h3>帮助中心</h3>
            <ul class="footer-links">
                <li><a href="#">常见问题</a></li>
                <li><a href="#">技术文档</a></li>
                <li><a href="https://cloud.ogmiao.com/terms.html">服务条款</a></li>
                <li><a href="https://cloud.ogmiao.com/privacy.html">隐私政策</a></li>
                <li><a href="#">投诉建议</a></li>
            </ul>
        </div>
        
        <div class="footer-col">
            <h3>联系方式</h3>
            <ul class="footer-links">
                <li><a href="#">暂无电话</a></li>
                <li><a href="#">ogmiao@outlook.com</a></li>
                <li><a href="#">上海浦东新区</a></li>
            </ul>
        </div>
    </div>
    
    <div class="copyright">
        <p>&copy; 2025 橘喵云. 保留所有权利 | <a href="https://cloud.ogmiao.com/terms.html" style="color: inherit; text-decoration: underline;">服务条款</a> | <a href="https://cloud.ogmiao.com/privacy.html" style="color: inherit; text-decoration: underline;">隐私政策</a></p>
    </div>
</div>
<!-- 回到顶部按钮 -->
<a href="#" id="backToTop" class="back-to-top" aria-label="回到顶部">
  <div class="scroll-progress-indicator"></div>
  <div class="back-to-top-icon"></div>
</a>
</footer>

<!-- 移动端底部导航 -->
<nav class="mobile-nav" id="mobileNav">
  <!-- Navigation items will be dynamically populated based on current page -->
</nav>

<script>
// 在页面加载完成后，为footer添加淡入动画
document.addEventListener("DOMContentLoaded", function() {
    // 获取footer元素
    const footer = document.querySelector("footer");
    
    // 创建交叉观察器
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            // 如果footer进入视口
            if (entry.isIntersecting) {
                // 为footer的每个子元素添加动画
                const footerElements = footer.querySelectorAll(".footer-col, .copyright");
                footerElements.forEach((element, index) => {
                    // 设置延迟动画
                    setTimeout(() => {
                        element.style.opacity = "1";
                        element.style.transform = "translateY(0)";
                    }, index * 150);
                });
                
                // 停止观察
                observer.unobserve(footer);
            }
        });
    }, {
        threshold: 0.1 // 当10%的元素可见时触发
    });
    
    // 设置初始样式
    const footerElements = footer.querySelectorAll(".footer-col, .copyright");
    footerElements.forEach((element) => {
        element.style.opacity = "0";
        element.style.transform = "translateY(20px)";
        element.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
    });
    
    // 开始观察footer
    observer.observe(footer);
    
    // 为footer链接添加悬停效果
    const footerLinks = document.querySelectorAll(".footer-links a");
    footerLinks.forEach((link) => {
        link.addEventListener("mouseenter", function() {
            this.style.paddingLeft = "5px";
        });
        
        link.addEventListener("mouseleave", function() {
            this.style.paddingLeft = "0";
        });
    });

    // 移动端底部导航初始化
    initMobileNav();
    
    // 改进的夜间模式样式 - 页脚
    function applyImprovedDarkModeFooter() {
      // 检查是否已经有夜间模式样式表
      let darkModeStyle = document.getElementById('improved-dark-mode-footer');
      
      if (!darkModeStyle) {
        // 创建新的样式表
        darkModeStyle = document.createElement('style');
        darkModeStyle.id = 'improved-dark-mode-footer';
        darkModeStyle.textContent = `
          /* 改进的夜间模式 - 更深色背景和降低亮度 */
          .dark footer {
            background-color: #0a0a0a !important;
            color: #a0a0a0 !important;
          }
          
          /* 页脚标题 */
          .dark .footer-col h3 {
            color: #c0c0c0 !important;
          }
          
          /* 页脚文本 */
          .dark .footer-col p,
          .dark .footer-links a,
          .dark .copyright p {
            color: #909090 !important;
          }
          
          /* 页脚标语 */
          .dark .footer-tagline {
            color: #b06a3d !important;
          }
          
          /* 社交图标 */
          .dark .footer-social-icon {
            background-color: rgba(176, 106, 61, 0.15) !important;
            color: #b06a3d !important;
          }
          
          .dark .footer-social-icon:hover {
            background-color: #b06a3d !important;
            color: #d0d0d0 !important;
          }
          
          /* 链接悬停 */
          .dark .footer-links a:hover {
            color: #b06a3d !important;
          }
          
          /* 版权分隔线 */
          .dark .copyright {
            border-top-color: rgba(80, 80, 80, 0.2) !important;
          }
          
          /* 回到顶部按钮 */
          .dark .back-to-top {
            background: linear-gradient(135deg, #b06a3d, #b08060) !important;
            box-shadow: 0 6px 20px rgba(176, 106, 61, 0.3) !important;
          }
          
          .dark .back-to-top:hover {
            box-shadow: 0 10px 25px rgba(176, 106, 61, 0.4) !important;
          }
          
          /* 移动端导航 */
          .dark .mobile-nav {
            background-color: #0a0a0a !important;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4) !important;
            border-top: 1px solid rgba(50, 50, 50, 0.1) !important;
          }
        `;
        
        document.head.appendChild(darkModeStyle);
      }
    }

    // 在页面加载完成后应用改进的夜间模式
    document.addEventListener("DOMContentLoaded", function() {
      // 检查是否是夜间模式
      if (document.body.classList.contains('dark')) {
        applyImprovedDarkModeFooter();
      }
      
      // 监听夜间模式变化
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.attributeName === 'class') {
            if (document.body.classList.contains('dark')) {
              applyImprovedDarkModeFooter();
            }
          }
        });
      });
      
      observer.observe(document.body, { attributes: true });
    });
    // 初始化回到顶部按钮
    initBackToTop();
});

// 移动端底部导航初始化
function initMobileNav() {
    const mobileNav = document.getElementById('mobileNav');
    if (!mobileNav) return;

    // 获取当前页面路径
    const currentPath = window.location.pathname;
    let navItems = [];

    // 根据当前页面设置不同的导航项
    if (currentPath.includes('activity.html')) {
        // 活动中心页面导航
        navItems = [
            { href: "/", icon: "🏠", text: "首页" },
            { href: "#all", icon: "🔍", text: "全部活动" },
            { href: "#discount", icon: "🔥", text: "限时折扣" },
            { href: "#free", icon: "🎁", text: "免费赠送" },
            { href: "#upgrade", icon: "⚡", text: "配置升级" },
            { href: "#events", icon: "📅", text: "线上活动" },
            { href: "#webmaster", icon: "🚀", text: "站长计划" }
        ];
    } else if (currentPath.includes('partner.html')) {
        // 合作伙伴页面导航
        navItems = [
            { href: "/", icon: "🏠", text: "首页" },
            { href: "#advantages", icon: "✨", text: "服务优势" },
            { href: "#benefits", icon: "🎁", text: "伙伴权益" },
            { href: "#requirements", icon: "📋", text: "申请要求" },
            { href: "#process", icon: "🔄", text: "申请流程" },
            { href: "#faq", icon: "❓", text: "常见问题" },
            { href: "#contact", icon: "📞", text: "联系我们" }
        ];
    } else if (currentPath.includes('terms.html') || currentPath.includes('privacy.html') || currentPath.includes('solutions.html')) {
        // 动态生成基于H2标题的导航项
        navItems = [
            { href: "/", icon: "🏠", text: "首页" }
        ];
        
        // 查找页面中的所有H2标题
        const h2Elements = document.querySelectorAll('h2');
        
        // 为每个H2标题生成导航项
        h2Elements.forEach((h2, index) => {
            // 如果H2没有ID，则生成一个ID
            if (!h2.id) {
                // 使用标题文本生成ID，移除数字和点，只保留文本部分
                let titleText = h2.textContent.trim();
                let idText = '';
                
                // 如果标题以数字开头（如"1. 服务定义"），提取数字作为ID
                const numberMatch = titleText.match(/^(\d+)\.?\s+/);
                if (numberMatch) {
                    idText = 'section-' + numberMatch[1];
                } else {
                    // 否则使用标题的前几个字作为ID
                    idText = 'section-' + (index + 1);
                }
                
                h2.id = idText;
            }
            
            // 提取标题文本，如果太长则截断
            let titleText = h2.textContent.trim();
            // 移除开头的数字和点（如"1. "）
            titleText = titleText.replace(/^\d+\.?\s+/, '');
            // 如果标题太长，截断它
            const shortTitle = titleText.length > 4 ? titleText.substring(0, 4) : titleText;
            
            // 为不同类型的标题选择合适的图标
            let icon = "📄";
            if (titleText.includes("服务") || titleText.includes("定义")) icon = "📝";
            else if (titleText.includes("用户") || titleText.includes("权利") || titleText.includes("责任")) icon = "👤";
            else if (titleText.includes("安全") || titleText.includes("保护")) icon = "🔒";
            else if (titleText.includes("信息") || titleText.includes("数据")) icon = "📊";
            else if (titleText.includes("Cookie")) icon = "🍪";
            else if (titleText.includes("变更") || titleText.includes("终止")) icon = "🔄";
            else if (titleText.includes("产权") || titleText.includes("知识")) icon = "©️";
            else if (titleText.includes("免责") || titleText.includes("声明")) icon = "⚠️";
            else if (titleText.includes("争议") || titleText.includes("解决")) icon = "⚖️";
            else if (titleText.includes("联系")) icon = "📞";
            else if (titleText.includes("儿童")) icon = "👶";
            else if (titleText.includes("国际") || titleText.includes("传输")) icon = "🌐";
            // 行业特定图标
            else if (titleText.includes("金融")) icon = "💰";
            else if (titleText.includes("医疗")) icon = "🏥";
            else if (titleText.includes("教育")) icon = "🎓";
            else if (titleText.includes("游戏")) icon = "🎮";
            else if (titleText.includes("零售") || titleText.includes("商业")) icon = "🛒";
            else if (titleText.includes("传媒") || titleText.includes("媒体")) icon = "📱";
            else if (titleText.includes("文旅") || titleText.includes("旅游")) icon = "🏞️";
            else if (titleText.includes("互联网")) icon = "🌐";
            
            // 添加导航项
            navItems.push({
                href: "#" + h2.id,
                icon: icon,
                text: shortTitle
            });
        });
        
        // 如果没有找到H2标题，使用默认导航
        if (navItems.length === 1) {
            if (currentPath.includes('terms.html')) {
                navItems = [
                    { href: "/", icon: "🏠", text: "首页" },
                    { href: "#", icon: "📝", text: "服务条款" }
                ];
            } else if (currentPath.includes('privacy.html')) {
                navItems = [
                    { href: "/", icon: "🏠", text: "首页" },
                    { href: "#", icon: "🔒", text: "隐私政策" }
                ];
            } else if (currentPath.includes('solutions.html')) {
                navItems = [
                    { href: "/", icon: "🏠", text: "首页" },
                    { href: "#", icon: "🌐", text: "解决方案" }
                ];
            }
        }
    } else if (currentPath.includes('bt.html')) {
        // 宝塔面板页面导航
        navItems = [
            { href: "/", icon: "🏠", text: "首页" },
            { href: "#features", icon: "✨", text: "功能优势" },
            { href: "#systems", icon: "🐧", text: "系统支持" },
            { href: "#install", icon: "⚙️", text: "安装命令" },
            { href: "#faq", icon: "❓", text: "常见问题" }
        ];
    } else {
        // 默认首页导航
        navItems = [
            { href: "#main-content", icon: "🏠", text: "首页" },
            { href: "#certificates", icon: "🏆", text: "资质认证" },
            { href: "#datacenter", icon: "🌐", text: "数据中心" },
            { href: "#why-us", icon: "✨", text: "服务优势" },
            { href: "#faq", icon: "❓", text: "常见问题" },
            { href: "#contact", icon: "📞", text: "联系我们" }
        ];
    }

    // 生成导航HTML
    let navHTML = '';
    navItems.forEach((item, index) => {
        const isActive = index === 0 ? 'active' : '';
        navHTML += `
            <a href="${item.href}" class="mobile-nav-item ${isActive}">
                <div class="mobile-nav-icon">${item.icon}</div>
                <span>${item.text}</span>
            </a>
        `;
    });

    // 插入导航HTML
    mobileNav.innerHTML = navHTML;

    // 添加导航项点击事件
    document.querySelectorAll('.mobile-nav-item').forEach(item => {
        item.addEventListener('click', function(e) {
            if (this.getAttribute('href').startsWith('#')) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                    
                    // 更新活跃状态
                    document.querySelectorAll('.mobile-nav-item').forEach(navItem => {
                        navItem.classList.remove('active');
                    });
                    this.classList.add('active');
                }
            }
        });
    });

    // 添加滚动监听以高亮当前部分
    window.addEventListener('scroll', function() {
        // 只有当前页面有锚点导航时才执行
        if (navItems.some(item => item.href.startsWith('#'))) {
            // 获取所有部分
            const sections = navItems
                .filter(item => item.href.startsWith('#'))
                .map(item => document.getElementById(item.href.substring(1)))
                .filter(section => section !== null);
            
            if (sections.length === 0) return;
            
            // 获取当前滚动位置
            const scrollPosition = window.scrollY;
            
            // 找出当前可见的部分
            let currentSection = null;
            let minDistance = Infinity;
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const distance = Math.abs(sectionTop - scrollPosition);
                
                if (distance < minDistance) {
                    minDistance = distance;
                    currentSection = section;
                }
            });
            
            // 更新导航高亮
            if (currentSection) {
                const sectionId = currentSection.id;
                document.querySelectorAll('.mobile-nav-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                const activeItem = document.querySelector(`.mobile-nav-item[href="#${sectionId}"]`);
                if (activeItem) {
                    activeItem.classList.add('active');
                }
            }
        }
    });
}

// 回到顶部按钮初始化
function initBackToTop() {
  const backToTopButton = document.getElementById('backToTop');
  if (!backToTopButton) return;
  
  const progressIndicator = backToTopButton.querySelector('.scroll-progress-indicator');
  
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 计算滚动百分比
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrollPercentage = (scrollTop / scrollHeight) * 100;
    
    // 当滚动超过300px时显示按钮
    if (window.scrollY > 300) {
      backToTopButton.classList.add('visible');
      
      // 更新进度环
      if (progressIndicator) {
        // 使用CSS变量来更新进度
        progressIndicator.style.setProperty('--progress', scrollPercentage + '%');
        // 不能直接选择伪元素，所以我们使用CSS变量来控制它
        document.documentElement.style.setProperty('--scroll-progress', `polygon(0% 0%, 100% 0%, 100% ${scrollPercentage}%, 0% ${scrollPercentage}%)`);
      }
    } else {
      backToTopButton.classList.remove('visible');
    }
  });
  
  // 点击事件
  backToTopButton.addEventListener('click', function(e) {
    e.preventDefault();
    
    // 添加点击波纹效果
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');
    this.appendChild(ripple);
    
    // 设置波纹位置
    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height) * 2.5;
    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${e.clientX - rect.left - size/2}px`;
    ripple.style.top = `${e.clientY - rect.top - size/2}px`;
    
    // 动画结束后移除波纹
    setTimeout(() => {
      ripple.remove();
    }, 800);
    
    // 平滑滚动到顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    
    // 添加按钮动画
    this.classList.add('clicked');
    setTimeout(() => {
      this.classList.remove('clicked');
    }, 300);
  });
}
</script>

